<template>
    <div class="app-container">
        <!-- start -->
        <div class="el-col el-col-24 bp_global_wrapper viewer-w">
            <div class="el-col el-col-24 flex-layout">
                <!--v-viewer的配置参数 配置方式有三种-->
                <!--1、不配置，指令默认使用该插件内置参数-->
                <!--<div class="images" v-viewer>-->
                <!--<img v-for="src in images" :src="src" :key="src" />-->
                <!--</div>-->

                <!--2、简洁配置(参数配置少)，以对象的方式直接赋值给v-viewer指令-->
                <!--<div class="images" v-viewer="{ inline: false }">-->
                <!--<img v-for="src in images" :src="src" :key="src" />-->
                <!--</div>-->

                <!--3、自定义配置(参数配置多)，在组件属性 data 内定义参数对象，同时赋值给v-viewer指令-->

                <div ref="viewer" class="images" v-viewer>
                    <img v-for="src in images" :src="src" :key="src" style="display: none;" />
                </div>

                <!--指令修饰器-->
                <!--1、static：添加修饰器后，viewer的创建只会在元素绑定指令时执行一次。如果你确定元素内的图片不会再发生变化，使用它可以避免不必要的重建动作。-->
                <!--<div ref="viewer" class="images" v-viewer.static="{ inline: false }">-->
                <!--<img v-for="src in images" :src="src" :key="src" />-->
                <!--</div>-->
                <!--2、rebuild：默认情况下当图片发生变更时(添加、删除或排序)，viewer实例会调用update方法更新内容。如果遇到任何显示问题，也可以尝试使用重建来代替更新。-->
                <!--<div ref="viewer" class="images" v-viewer.rebuild="{ inline: false }">-->
                <!--<img v-for="src in images" :src="src" :key="src" />-->
                <!--</div>-->
            </div>
            <div class="el-col el-col-24 btn-w text-align-c">
                <el-button type="primary" @click="showViewer" circle icon="el-icon-aim"
                    style="position: absolute;    top: 20%; right:20px;z-index:99999"></el-button>
            </div>
        </div>
        <!-- end -->
    </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
export default {

    props: ["imgList", "listLength"],
    watch: {
        imgList: {
            handler(valNew, valOld) {
            },
            immediate: true,
        }
    },
    data() {
        return {
            images: [],
            //  images: ['https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200'],
            index: 0,
        }
    },
    methods: {
        /**
* 点击图片预览按钮，进行图片预览播放
*/
        showViewer1() {
            this.images = [];
            this.$modal.loading("正在预览文件，请稍候...")
            for (var i in this.imgList) {
                axios({
                    method: 'POST',
                    url: process.env.VUE_APP_BASE_API + `/archive/detail/viewImg`,
                    params: {
                        file: this.imgList[i]
                    },
                    headers: {
                        Authorization: "Bearer " + getToken()
                    },
                    responseType: 'blob' // 更改responseType类型为 blob
                }).then(res => {
                    console.log(res, "sdkljfksdlfjks")
                    const blob = new Blob([res.data], {
                        type: "image/jpeg",
                    })
                    this.images.push(window.URL.createObjectURL(blob))
                    console.log(this.listLength, this.images.length)
                    // 显示播放两种方式
                    // 1、直接样式匹配到指定选择器的第一个元素，然后通过$viewer属性获取对应的元素信息对象，从而调用方法显示
                    // const viewer = this.$el.querySelector('.images').$viewer
                    // viewer.show()

                    // 2、通过ref获取到对应节点，再通过$viewer属性获取对应的元素信息对象，继而调用方法显示
                    if (this.listLength == this.images.length) {

                        this.$modal.closeLoading()
                        this.$refs.viewer.$viewer.show()
                    }
                }).catch(err => {
                    console.log(err)
                })
            }



        },

        async showViewerPost(index) {
            if (index >= this.imgList.length) {  
            // 所有图片都已处理完毕  
            this.$modal.closeLoading();  
            if (this.$refs.viewer) {  
                this.$refs.viewer.$viewer.show();  
            }  
            return;  
            }  
            try {
                const response = await axios({
                    method: 'POST',
                    url: process.env.VUE_APP_BASE_API + `/archive/detail/viewImg`,
                    params: {
                        file: this.imgList[index]
                    },
                    headers: {
                        Authorization: "Bearer " + getToken()
                    },
                    responseType: 'blob' // 更改responseType类型为 blob
                })

                console.log(response, "slkjfsdklfj111111111111klsdfjksdjfk")
                if (response.status == "200") {
                    const blob = new Blob([response.data], { type: "image/jpeg" });
                    this.images.push(window.URL.createObjectURL(blob));
                    // 递归调用以处理下一张图片  
                    this.showViewerPost(index + 1);
                } else {

                }
            } catch (error) {
                console.error('Error fetching image:', error);
            }

        },

        showViewer(){
            this.images = [];
            this.$modal.loading("正在预览文件，请稍候...")
            this.showViewerPost(0)
        },



    }
}
</script>
<style scoped>
::v-deep.viewer-container {
    z-index: 99999999;
}
</style>
